<template>
  <div class="scroll-container" ref="scrollContainer" @mouseenter="stopScroll" @mouseleave="startScroll">
    <!-- 这里放置你需要滚动的内容 -->
    <div v-for="item in items" :key="item">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71],
      currentScrollTop: 0, // 当前滚动位置
      isScrollingUp: false, // 标记是否正在向上滚动
    };
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      // 获取当前滚动位置
      this.currentScrollTop = this.$refs.scrollContainer.scrollTop
      this.intervalId = setInterval(() => {
        const maxScrollTop = this.$refs.scrollContainer.scrollHeight - this.$refs.scrollContainer.clientHeight;
        
        // 如果没有滚动到顶部并且未达到底部，则向下滚动
        if (!this.isScrollingUp && this.currentScrollTop < maxScrollTop) {
          this.currentScrollTop += 10;
          this.$refs.scrollContainer.scrollTop = this.currentScrollTop;
        } 
        // 判断是否已滚动到底部并开始重新从顶部滚动
        else if (this.currentScrollTop >= maxScrollTop) {
          this.isScrollingUp = true;
          this.currentScrollTop = 0;
          this.$refs.scrollContainer.scrollTop = this.currentScrollTop;
        }
        // 滚动到顶部或过程中向上滚动时，重置状态并从头开始
        else if (this.isScrollingUp && this.currentScrollTop <= 0) {
          this.isScrollingUp = false;
          this.currentScrollTop = 0;
          this.$refs.scrollContainer.scrollTop = this.currentScrollTop;
        }
      }, 100);
    },
    stopScroll() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalId); // 组件卸载前清除定时器
  }
};
</script>

<style scoped>
.scroll-container {
  overflow-y: auto;
  height: 200px;
}
</style>